<!--
 * @Date: 2020-07-10 11:49:33
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-09 20:31:49
--> 
<template>
  <div class="index-user-wrapper wrapper-with-tabbar">
    <div class="index-user-panel">
      <div
        class="user-bg"
        :style="`background-image: url(${staticPath}/home_bg@2x.png)`"
      ></div>
      <div
        class="small-icon"
        :style="`background-image: url(${staticPath}/img_jixiangwu@2x.png)`"
      ></div>
      <div
        class="user-panel"
        :class="cardInfo ? 'is-login' : 'not-login'"
        :style="`background-image: url(${staticPath}/tianjia_bg@2x.png)`"
      >
        <van-button
          plain
          color="#7EDC74"
          :icon="`${staticPath}/icon_tianjia@2x.png`"
          to="/user/office/index"
          v-if="!cardInfoLength"
          >添加/完善就诊人</van-button
        >
        <div class="user-card" v-else>
          <div class="left-info" @click="handleExchange">
            <div class="avatar">
              <van-image
                round
                width="60px"
                height="60px"
                :src="userInfo.photo"
              />
            </div>
            <div class="name-wrapper">
              <h3>{{ cardInfo.name }} <van-tag color="#7EDC74" plain
                >切换 <van-icon name="exchange" color="#7EDC74" size="8px"
              /></van-tag></h3>
              <div class="bot-card">
                <span>{{cardInfo.card_number}}</span>
              </div>
            </div>
          </div>
          <div class="right-info">
            <div class="qrinfo" @click="popupShow = true">
              <img :src="qrNum" alt="" style="width: 90px" />
              <p>扫描请点击</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog
      v-model="popupShow"
      title="查看二维码"
      show-cancel-button
      class="popup-dialog"
    >
      <img :src="qrNum" alt="" style="width: 200px;height: 200px" />
    </van-dialog>

    <van-grid class="tools-entry" :gutter="10" column-num="3" icon-size="48px">
      <van-grid-item
        :icon="`${staticPath}/icon_guahao@2x(1).png`"
        text="预约挂号"
        class="entry1"
      />
      <van-grid-item
        :icon="`${staticPath}/icon_huli@2x.png`"
        text="护理上门"
        to="/huli"
        class="entry2"
      />
      <van-grid-item
        :icon="`${staticPath}/icon_jiaofei@2x.png`"
        text="门诊缴费"
        class="entry3"
      />
    </van-grid>

    <div class="common-pad">
      <van-notice-bar
        color="#1989fa"
        background="#fff"
        :scrollable="false"
        :left-icon="`${staticPath}/img_gonggao@2x(1).png`"
        mode="link"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in newsList"
            :key="index"
            @click="handleDetail(item)"
            >{{ item.title }}</van-swipe-item
          >
        </van-swipe>
      </van-notice-bar>
    </div>

    <div class="common-wrapper-panel">
      <div class="common-title-line">
        <h3><em></em>门诊服务</h3>
      </div>
      <van-grid icon-size="36px" :border="false" class="menzhen-entry">
        <van-grid-item
          v-for="(item, index) in navList1"
          :key="index"
          :icon="item.ico"
          :text="item.title"
          icon-size="36px"
          @click="handleRouter(item)"
        />
        <!-- <van-grid-item :icon="`${staticPath}/icon_tijianyuyue@2x.png`" text="体检预约" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_yuyuejilv@2x.png`" text="预约记录" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_shijianbiao@2x.png`" text="产检时间表" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_baogao@2x.png`" text="门诊报告查询" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_jiuzhenka@2x.png`" text="就诊卡管理" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_houzhen@2x.png`" text="候诊查询" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_chanfujiandang@2x.png`" text="产妇建档" icon-size="36px" />
        <van-grid-item :icon="`${staticPath}/icon_zhengming@2x.png`" to="/user/prove" text="出生医学证明" icon-size="36px"/>
        <van-grid-item :icon="`${staticPath}/icon_jiedu@2x.png`" text="报告解读" icon-size="36px" /> -->
      </van-grid>
    </div>

    <div class="common-wrapper-panel">
      <div class="common-title-line">
        <h3><em></em>住院服务</h3>
      </div>
      <van-grid icon-size="36px" :border="false">
        <van-grid-item
          v-for="(item, index) in navList2"
          :key="index"
          :icon="item.ico"
          :text="item.title"
          icon-size="36px"
          @click="handleRouter(item)"
        />
        <!-- <van-grid-item :icon="`${staticPath}/icon_yajin@2x.png`" text="住院押金" icon-size="36px"/>
        <van-grid-item :icon="`${staticPath}/icon_hesuan@2x.png`" text="核酸检测" icon-size="36px"/> -->
      </van-grid>
    </div>

    <div class="abverse">
      <van-swipe
        vertical
        class="huli-wrapper"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="(item, index) in bannerList.homehuli.poster"
          :key="index"
          @click="$router.push({ path: '/huli/index' })"
        >
          <img :src="item.picurl" alt="" srcset="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="common-wrapper-panel">
      <div class="common-title-line">
        <h3><em></em>其他服务</h3>
      </div>
      <van-grid column-num="2" gutter="10" icon-size="36px" :border="false">
        <van-grid-item
          v-for="(item, index) in navList3"
          :key="index"
        >
          <div class="item-grid" @click="handleRouter(item)">
            <div class="left-grid">
              <h3>{{item.title}}</h3>
              <p>{{item.abstract}}</p>
            </div>
            <div class="right-grid">
              <van-image
                round
                width="36px"
                height="36px"
                :src="item.ico"
              />
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <van-dialog
      v-model="show"
      title="选择就诊人"
      show-cancel-button
      @confirm="handleConfirm"
      theme="round-button"
    >
      <div class="min-wrapper">
        <van-radio-group v-model="radio">
          <van-radio
            :name="item.id"
            v-for="(item, index) in memberArrList"
            :key="index"
            checked-color="#4ECE40"
            >{{ item.name }}</van-radio
          >
        </van-radio-group>
      </div>
    </van-dialog>

    <footTab></footTab>
  </div>
</template>

<script>
import footTab from "@/components/footerTab/index";
import staticPath from "@/assets/json/index";
import noticePanel from "@/components/notice-panel/index";
import { mapGetters, mapState } from "vuex";
import { userInfo } from "vuex";
import { initWxJSDK } from "@/utils/wx-util";
import { newsInfoService } from "@/service/user";
import { memberDefaultService, memberList } from "@/service/server";
import { homerServer } from "@/service/app";
import { bannerService } from "@/service/user";
import { param2Obj, objectConvertToQuery, isIOS } from "@/utils/index";
import QRCode from "qrcode";
import {
  loadToken
} from '@/utils/cache'
export default {
  data() {
    return {
      radio: "",
      notice: staticPath.notice,
      stepFoot: staticPath.step,
      staticPath: process.env.VUE_APP_STATIC_PATH,
      current: 0,
      numberDialog: false,
      popupShow: false,
      checked: true,
      deviceNum: "",
      isLogin: true,
      newsList: [],
      navList1: [],
      navList2: [],
      navList3: [],
      memberArrList: [],
      qrNum: "",
      images: [
        {
          id: 0,
          type: "image",
          url: staticPath.banner1,
        },
        {
          id: 1,
          type: "image",
          url: staticPath.banner2,
        },
        {
          id: 2,
          type: "image",
          url: staticPath.banner3,
        },
      ],
      cardInfo: {},
      memberDefault: {},
      show: false,
    };
  },
  created() {
    if (this.token) {
      let token = loadToken()
        if(!token){
          return
        }
      this.$store.dispatch("app/setAppInfoAction", {});
      this.$store.dispatch("app/setBannerAction", {});
      if(!this.userInfo.tel) return this.$router.replace({
        path: '/user/bind-phone'
      })
      this.fetchTongzhi({
        page: 1,
        catid: 2,
      });
      // this.fetchInitWxutil();
      this.queryNavList();
      this.queryMemberDefault();
      this.queryMemberList();
    }
  },
  watch: {
    token: function (newVal, oldVal) {
      if (newVal) {
        let token = loadToken()
        if(!token){
          return
        }
        this.fetchTongzhi({
          page: 1,
          catid: 2,
        });
        // this.fetchInitWxutil();
        this.queryNavList();
        this.queryMemberDefault();
        this.queryMemberList();
      }
    },
  },
  computed: {
    ...mapGetters(["userInfo", "code", "bannerList", "token"]),
    cardInfoLength(){
      return !this.memberArrList.length == 0 || JSON.stringify(this.memberDefault) == '{}'
    }
  },
  methods: {
    handleExchange() {
      this.memberArrList.length > 0 && (this.show = true);
    },
    handleConfirm() {
      this.show = false;
      console.log(this.radio, "");
      this.cardInfo =
        this.memberArrList.length > 0
          ? this.memberArrList.filter((item) => item.id == this.radio)[0]
          : this.memberDefault;
      QRCode.toDataURL(this.cardInfo.card_number)
        .then((url) => {
          this.qrNum = url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    async queryMemberList() {
      let result = await memberList();
      if (result.status == 200) {
        this.memberArrList = result.data.model;
      } else {
        this.$toast(result.message);
      }
    },
    handleRouter(item) {
      if (item.isouturl == 0) {
        window.location.href = item.linkurl;
      } else {
        if (item.linkurl.indexOf("/user/covid/index") > -1) {
          window.location.href =
            window.location.protocol + '//' + process.env.VUE_APP_HOST + item.linkurl;
            return
        } else {
          this.$router.push({
            path: item.linkurl,
          });
        }
      }
    },
    async queryMemberDefault() {
      let result = await memberDefaultService();
      if (result.status == 200) {
        this.cardInfo = result.data;
        this.memberDefault = result.data;
        if (Object.keys(result.data).length > 0) {
          QRCode.toDataURL(result.data.card_number)
            .then((url) => {
              this.qrNum = url;
            })
            .catch((err) => {
              console.error(err);
            });
        }
      } else {
        this.$toast(result.message);
      }
    },
    async queryNavList() {
      let result = await Promise.all([
        homerServer({ type: 97 }),
        homerServer({ type: 98 }),
        homerServer({ type: 99 }),
      ]);
      this.navList1 = result[0].data;
      this.navList2 = result[1].data;
      this.navList3 = result[2].data;
      console.log(result, "queryNavlist");
    },
    async fetchTongzhi(params) {
      let result = await newsInfoService(params);
      if (result.status == 200) {
        this.newsList = result.data.model;
      } else {
        this.$toast(result.message);
      }
    },
    async fetchInitWxutil() {
      await initWxJSDK([
        "scanQRCode",
        "chooseImage",
        "uploadImage",
        "previewImage",
        "chooseWXPay",
      ]);
    },
    routerTo() {
      this.$router.push({
        path: "/user/disclaimer",
      });
    },
    handleDetail(item) {
      console.log(item);
      
        this.$router.push({
          path: `/home/news-detail/${item.id}`,
        });
      
    },
  },
  components: {
    footTab,
    noticePanel,
  },
};
</script>
<style lang='less'>
.notice {
  font-size: 12px;
  .notice-icon {
    display: inline-block;
    width: 40px;
  }
}
.min-wrapper {
  min-height: 100px;
  padding: 12px 15px;
  .van-radio {
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 5px;
  }
}
.popup-dialog {
  .van-dialog__content {
    display: flex;
    justify-content: center;
  }
}
.index-user-wrapper {
  height: 100%;
  background: #f5f5f5;
  .index-user-panel {
    position: relative;
    margin-bottom: 10px;
    background: #fff;
  }
  .common-wrapper-panel {
    margin-top: 10px;
    background: #fff;
    padding: 15px;
    .van-grid-item__content {
      background: transparent;
      padding: 0 0 0 0;
    }
    .common-title-line {
      margin-bottom: 15px;
      h3 {
        font-size: 16px;
        margin-bottom: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        em {
          display: inline-block;
          width: 5px;
          height: 17px;

          background: linear-gradient(0deg, #7edc74 0%, #4ece40 100%);
          border-radius: 5px;
          margin-right: 6px;
        }
      }
    }
  }
  .user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .left-info {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .avatar {
        display: flex;
        flex-direction: column;
        align-items: center;
      
      }
      .name-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        height: 60px;
        padding-left: 15px;
        h3 {
          font-size: 16px;
        }
        .bot-card {
          p {
            font-size: 14px;
            color: #808080;
            margin-bottom: 12px;
          }
          span {
            color: #333;
          }
        }
      }
    }
  }
  .van-notice-bar {
    color: #333;
    .van-notice-bar__left-icon {
      font-size: 32px;
      margin-right: 10px;
    }
    .van-icon-arrow {
      color: #333;
    }
  }
  .tools-entry {
    padding-top: 10px;
    background: #fff;
    .van-grid-item__content {
      border-radius: 8px;
      .van-grid-item__text {
        color: #fff;
        font-size: 16px;
      }
    }
    .entry1 {
      .van-grid-item__content {
        background: linear-gradient(-90deg, #fbb0b3, #f9969a);
      }
    }
    .entry2 {
      .van-grid-item__content {
        background: linear-gradient(-90deg, #ffd97b, #ffca46);
      }
    }
    .entry3 {
      .van-grid-item__content {
        background: linear-gradient(-90deg, #55d147, #6ee760);
      }
    }
  }
  .common-pad {
    padding: 12px 0 10px 0;
    background: #fff;
    .van-notice-bar__content {
      color: #333;
    }
  }
  .qrinfo {
    text-align: center;
  }
  .user-bg {
    width: 100%;
    height: 157px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .small-icon {
    width: 60px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .user-panel {
    width: calc(100% - 20px);
    height: 150px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -80px;
    border-radius: 15px;
    background-color: #fff;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    &.not-login {
      padding: 60px 15px;
    }
    &.is-login {
      padding: 0 15px;
    }
  }
}
.abverse {
  background: #fff;
  padding: 5px 10px;
  margin-top: 10px;
  img {
    width: 100%;
    height: 80px;
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
// .banner {
//   img {
//     width: 100%;
//     display: block;
//   }
//   .van-swipe {
//     &-item {
//       color: #ffffff;
//       font-size: 20px;
//       height: 150px;
//       text-align: center;

//       &:nth-child(even) {
//         background-color: #39a9ed;
//       }

//       &:nth-child(odd) {
//         background-color: #66c6f2;
//       }
//     }

//     img {
//       display: block;
//       box-sizing: border-box;
//       width: 100%;
//       height: 240px;
//       padding: 30px 60px;
//       background-color: #fff;
//       pointer-events: none;
//     }
//   }
// }
.scan-container {
  padding: 30px 80px 0 80px;
}
@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 兼容iphone4/4s */
  　.scan-container {
    padding: 30px 60px 0 60px;
  }
}

@media screen and (max-width: 340px) {
  /* 兼容iphone5 */
  　.scan-container {
    padding: 30px 60px 0 60px;
  }
}
.space {
  padding: 15px;
}
.common-dialog {
  .content {
    padding: 20px 40px;
    p {
      font-size: 12px;
      color: #808080;
      margin-bottom: 12px;
    }
    text-align: center;
    .input-wrapper {
      margin-top: 10px;
      .input {
        border: 1px solid #9e99b9;
        border-radius: 25px;
        height: 35px;
        line-height: 30px;
        padding: 3px 10px;
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.radio-wrapper {
  font-size: 12px;
  padding: 20px 0;
  .van-checkbox {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .xieyi {
    color: #39a9ed;
  }
}
.van-dialog__content {
  overflow: hidden;
}
.item-grid{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px 3px;
  .left-grid{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    h3{
      margin-bottom: 10px;
      font-weight: normal;
      .ellipsis()
    }
    p{
      color: #999;
      font-size: 12px;
      .ellipsis()
    }
  }
}
.menzhen-entry{
  .van-grid-item{
    padding: 0 0 10px 0;
  }
}
</style>